import React, { useEffect, useState } from "react";
import moment from 'moment';
import { Form, Input, Button, Select, DatePicker, Space } from 'antd';
import "./tableSearchForm.less";
import { getAreaAll, getStoreAll, getBrandAll, getSpuAll, getAsinAll } from "@/api/commonApi.js"
const { RangePicker } = DatePicker;

// 样式
const formItemStyle = {
  width: 220,
  margin: "3px 20px 10px 0",
};
const formItemTypeStyle = {
  width: 220,
}
// 时间格式化
const dateFormat = 'YYYY-MM-DD';

const initialValues = {
  time: [moment('2020-02-15', dateFormat), moment('2020-05-06', dateFormat)],
};

const TableSearchForm = (props) => {
  console.log('TableSearchForm-props: ', props);
  const {form} = props;

  const [countryList, setCountryList] = useState([]);
  const [storeAllList, setStoreAllList] = useState([]);
  const [brandAllList, setBrandAllist] = useState([]);
  const [spuAllList, setSpuAlllist] = useState([]);
  const [asinAllList, setAsinAlllist] = useState([]);

  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  }
  const onReset = () => {
    form.resetFields();
    props.refreshList();
  };
  const inquireHander = () => {
    console.log('form: ', form.getFieldsValue());
    props.refreshList();
  }

  useEffect(() => {
    getAreaAll()
    .then(res => {
      setCountryList(res.data.data)    
    })
    .catch(e => console.log('错误:', e))

    getStoreAll()
    .then(res => {
      setStoreAllList(res.data.data)    
    })
    .catch(e => console.log('错误:', e))

    getBrandAll()
    .then(res => {
      setBrandAllist(res.data.data)    
    })
    .catch(e => console.log('错误:', e))

    getSpuAll()
    .then(res => {
      setSpuAlllist(res.data.data)    
    })
    .catch(e => console.log('错误:', e))

    getAsinAll()
    .then(res => {
      setAsinAlllist(res.data.data)    
    })
    .catch(e => console.log('错误:', e))
  }, []);
  
  return (
    <Form form={form} name="searchForm" layout="vertical" initialValues={initialValues} onFinish={onFinish} onFinishFailed={onFinishFailed}>
      <Form.Item label="活动时间（北京）" name="time" style={formItemStyle}>
        <RangePicker style={formItemTypeStyle} format={dateFormat}/>
      </Form.Item>
      <Form.Item label="国家地区" name="area_id" style={formItemStyle}>
        <Select style={formItemTypeStyle} onChange={handleChange} showSearch options={countryList.map(v =>{return {label: v.areaname, value: v.id}})}></Select>
      </Form.Item>
      <Form.Item label="店铺缩写" name="store_id" style={formItemStyle}>
        <Select style={formItemTypeStyle} onChange={handleChange} showSearch options={storeAllList.map(v =>{return {label: v.shortname, value: v.id}})}></Select>
      </Form.Item>
      <Form.Item label="品牌" name="bid" style={formItemStyle}>
        <Select style={formItemTypeStyle} onChange={handleChange} showSearch options={brandAllList.map(v =>{return {label: v.brandname, value: v.id}})}></Select>
      </Form.Item>
      <Form.Item label="SPU" name="spu" style={formItemStyle}>
        <Select style={formItemTypeStyle} onChange={handleChange} showSearch options={spuAllList.map(v =>{return {label: v.spu, value: v.id}})}></Select>
      </Form.Item>
      <Form.Item label="ASIN" name="asin" style={formItemStyle}>
        <Select style={formItemTypeStyle} onChange={handleChange} showSearch options={asinAllList.map(v =>{return {label: v, value: v}})}></Select>
      </Form.Item>
      <Form.Item label="id" name="id" style={formItemStyle}>
        <Input style={formItemTypeStyle}/>
      </Form.Item>
      <Form.Item label=" " style={formItemStyle}>
        <Space>
          <Button type="primary" loading={props.loading} onClick={ inquireHander }>查询</Button>
          <Button loading={props.loading} onClick={ onReset }>重置</Button>
          <Button loading={props.loading}>更多</Button>
        </Space>
      </Form.Item>
    </Form>
  );
}

export default TableSearchForm;